<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>书城</title>
    <link rel="stylesheet" href="css/reset.css"><!--清除默认样式-->
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

        body {
            text-align: left;
            width: 100%;
            overflow: hidden;
            background: #e9dfc7;
            color: #555;
            touch-action: none;
        }

        /*容器*/
        .container {
            position: relative;
        }

        /****************************顶部导航*/
        .top-nav {
            position: fixed;
            top: 0;
            height: 50px;
            width: 100%;
            z-index: 9999;
            background: #000;
            color: #fff;

        }

        .icon-back {
            position: absolute;
            top: 14px;
            left: 10px;
            width: 23px;
            height: 23px;
            background: url(
            );
            background-size: contain;

        }

        .nav-title {
            position: absolute;
            top: 15px;
            left: 38px;
        }

        /********************************主体内容*/
        .m-read-content {
            font-size: 14px;
            color: #555;
            line-height: 31px;
            padding: 15px;

        }

        .m-read-content h4 {
            font-size: 20px;
            color: #736357;
            border-bottom: 1px solid #736357;
            letter-spacing: 2px;
            margin: 0 0 1em 0;

        }

        .m-read-content p {
            text-indent: 2em;
            margin: 0.5em 0;
            letter-spacing: 0;
            line-height: 24px;

        }

        /***************************************底部按钮*/
        .m-button-bar {
            width: 70%;
            margin: 0 auto;
            max-width: 640px;
            padding: 5px;

        }

        .u-tab {
            width: 100%;
            height: 34px;
            margin: 10px auto;
            line-height: 34px;
            border-radius: 17px;
            border: 1px solid #858382;
            background: #000;
            opacity: 0.9;
        }

        .u-tab li {
            list-style: none;
            text-align: center;
            float: left;
            width: 49%;
            color: #fff;
        }

        .u-tab li:nth-of-type(1) {
            border-right: 1px solid #ffffff;
        }

        /***************************************总面板*/
        .pannel {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: auto;
            color: #fff;

        }

        /**********************************************面板*/
        .nav-pannel {
            width: 100%;
            height: 100px;
            position: fixed;
            bottom: 70px;
            left: 0px;
            background: rgba(0, 0, 0, 0.8);

        }

        .nav-pannel > div {
            width: 100%;
            height: 50%;

        }

        .nav-pannel > .child-mod1 {
            padding-top: 13px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .child-mod1 > button {
            width: 80px;
            height: 25px;
            background: none;
            border: 1px solid #8c8c8c;
            color: #fff;
            border-radius: 10px;
            outline: none;
        }

        .child-mod1 > button:nth-of-type(1) {
            margin: 0 10px 0 20px;
        }

        .nav-pannel > div > span {
            margin-left: 10px;
        }

        .nav-pannel > .child-mod2 > span {
            line-height: 50px;
            float: left;
        }

        .child-mod2 > ul {
            float: left;
            height: 50px;
            margin: 0 0 0 20px;
            padding-top: 12px;
            position: relative;

        }

        /*背景颜色*/
        .child-mod2 > ul > li {
            width: 26px;
            height: 26px;
            float: left;
            margin-left: 10px;
            position: relative;

        }

        .child-mod2 > ul > li:nth-of-type(1) > span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #f7eee5;
        }

        .child-mod2 > ul > li:nth-of-type(1) > i {
            position: absolute;
            width: 26px;
            height: 26px;
            border: 2px solid #ff7800;
            top: -2px;
            left: -1px;
            border-radius: 50%;
            display: none;

        }

        .child-mod2 > ul > li:nth-of-type(2) > span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;

            background-color: #e9dfc7;
        }

        .child-mod2 > ul > li:nth-of-type(2) > i {
            position: absolute;
            width: 26px;
            height: 26px;
            border: 2px solid #ff7800;
            top: -2px;
            left: -1px;
            border-radius: 50%;
            display: block;

        }

        .child-mod2 > ul > li:nth-of-type(3) > span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #a4a4a4;
        }

        .child-mod2 > ul > li:nth-of-type(3) > i {
            position: absolute;
            width: 26px;
            height: 26px;
            border: 2px solid #ff7800;
            top: -2px;
            left: -1px;
            border-radius: 50%;
            display: none;

        }

        .child-mod2 > ul > li:nth-of-type(4) > span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #cdefce;
        }

        .child-mod2 > ul > li:nth-of-type(4) > i {
            position: absolute;
            width: 26px;
            height: 26px;
            border: 2px solid #ff7800;
            top: -2px;
            left: -1px;
            border-radius: 50%;
            display: none;

        }

        .child-mod2 > ul > li:nth-of-type(5) > span {

            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #283548;
        }

        .child-mod2 > ul > li:nth-of-type(5) > i {
            position: absolute;
            width: 26px;
            height: 26px;
            border: 2px solid #ff7800;
            top: -2px;
            left: -1px;
            border-radius: 50%;
            display: none;

        }

        .child-mod2 > ul > li:nth-of-type(6) > span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #0f1410;
        }

        .child-mod2 > ul > li:nth-of-type(6) > i {
            position: absolute;
            width: 26px;
            height: 26px;
            border: 2px solid #ff7800;
            top: -2px;
            left: -1px;
            border-radius: 50%;
            display: none;

        }

        /*****************************************底部导航*/
        .bottom-nav {
            width: 100%;
            height: 70px;
            position: fixed;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.8);
        }

        .bottom-nav > ul {
            width: 100%;
            height: 100%;
            display: flex;
            text-align: center;
            padding-top: 10px;
        }

        .bottom-nav > ul > li {
            flex: 1;
        }

        .bottom-nav > ul > li:nth-of-type(1) > span {
            width: 15px;
            height: 10px;
            display: inline-block;

            background: url();
            background-size: contain;
        }

        .bottom-nav > ul > li:nth-of-type(2) > span {
            width: 16px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }

        .bottom-nav > ul > li.cur1 > span {
            width: 15px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }

        .bottom-nav > ul > li:nth-of-type(3) > span {
            width: 10px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }

        .bottom-nav > ul > li.cur2 > span {
            width: 10px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }

        /*响应层*/
        .articl-action-mid {
            width: 100%;
            height: 40%;
            position: fixed;
            top: 30%;
            left: 0;
        }

        /*章节目录*/
        #catalogue {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            color: #fff;
            display: none;
            z-index: 3;
            overflow: hidden;
            z-index: 100;
        }

        #catalogue_ul {
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="root" class="container">
    <!--响应层-->
    <div class="m-artical-action">
        <div class="articl-action-mid" id="action_md"></div>
    </div>
    <!--导航-->
    <div id="top_nav" class="top-nav" style="display: none">
        <div class="icon-back"></div>
        <div class="nav-title">返回书架</div>
    </div>
    <!--标题-->
    <div id="fition_chapter_title"></div>
    <!--存放文章内容-->
    <div id="fition_container" class="m-read-content">
    </div>
    <!--上下章-->
    <div class="m-button-bar">
        <ul class="u-tab">
            <li id="prev_button">上一章</li>
            <li id="next-button">下一章</li>
        </ul>
    </div>
    <!--总面板面板-->
    <div class="pannel">
        <!--面板-->
        <div class="nav-pannel" id="font_container" style="display:none">
            <div class="child-mod1">
                <span>字号</span>
                <button id="large_font" class="font-size-button">
                    大
                </button>
                <button id="small_font" class="font-size-button">
                    小
                </button>
            </div>
            <div class="child-mod2">
                <span>背景</span>
                <ul id="ulbg">
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>


                </ul>
            </div>
        </div>
        <!--底部导航面板-->
        <div id="bottom_nav" class="bottom-nav" style="display: none">
            <ul>
                <li id="mulu">
                    <span></span>
                    <p>目录</p>
                </li>
                <li id="ziti">
                    <span></span>
                    <p>字体</p>
                </li>
                <li id="ye">
                    <span></span>
                    <p>夜间</p>
                </li>
            </ul>
        </div>
    </div>
    <!--章节目录-->
    <div id="catalogue">
        <ul id="catalogue_ul">
            <li>第001章 绝处逢生？</li>
            <li>第002章 我是第二章？</li>
            <li>第003章 我是第三章？</li>
        </ul>
    </div>

</div>
<!------------------以下JS代码----------------------------->
<script src="lib/zepto.min.js"></script>
<script src="lib/fx.js"></script>
<script src="lib/fx_methods.js"></script>
<script src="lib/selector.js"></script>
<script src="js/touch.js"></script>
<script>
    window.jQuery = $;
</script>
<script src="js/jquery.base64.js"></script>
<script src="js/jquery.jsonp.js"></script>
<script>
    'use strict';
    (function () {
        var Util = (function () {
            /*本地化存储数据*/
            var prefix = 'heml5_readr_';
            var StorageGetter = function (key) {
                return localStorage.getItem(prefix + key);
            }
            var StorageSetter = function (key, val) {
                return localStorage.setItem(prefix + key, val)

            }
            var getBSONP = function (url, callback) {
                /*数据解密 解码*/
                return $.jsonp({
                    url: url,
                    cache: true,
                    callback: 'duokan_fiction_chapter',
                    success: function (result) {
                        var data = $.base64.decode(result);
                        var json = decodeURIComponent(escape(data));
                        callback && callback(json);
                    }
                })

            }
            return {
                getBSONP: getBSONP,
                StorageGetter: StorageGetter,
                StorageSetter: StorageSetter,
            }

        })();

        /*全局Dom*/
        var Dom = {
            top_nav: $('#top_nav'),  //顶部导航
            action_md: $('#action_md'), //响应层
            font_container: $('#font_container'),//面板
            bottom_nav: $('#bottom_nav'),//底部导航
            ye: $('#ye'),//夜间切换dom
            ziti: $('#ziti')//字体dom


        }
        /*全局变量*/
        var Win = $(window);
        var Doc = $(document);
        var FitionContainer = $('#fition_container')
        var initFontSize = Util.StorageGetter('font_size');
        var bodyBackground = Util.StorageGetter('bodyColor');//背景颜色
        var pText = Util.StorageGetter('pText');//夜间字体变化
        var pTubiao = Util.StorageGetter('pTubiao');//白天夜间图标变化保存

        var readerModel;  //数据交互全局
        var readerUI;  //UI全局
        var Chapters;//数据全局数组


        /*字体保存设置*/
        initFontSize = parseInt(initFontSize)
        if (!initFontSize) {
            initFontSize = 14;
        }
        FitionContainer.css({fontSize: initFontSize})

        /*夜间颜色切换保存设置*/
        $('body').css({background: bodyBackground})
        /*夜间字体切换保存*/
        Dom.ye.find('p').text(pText)
        /*白天夜间图标保存*/
        Dom.ye.addClass(pTubiao)
        var yey = false;//是否是夜间模式
        function main() {
            //  项目的入口函数
            readerModel = ReaderModel();
            readerUI = ReaderBaseFrame(FitionContainer);
            readerModel.init(function (data) {
                readerUI(data);

            });
            EventHanlder();
        }

        function ReaderModel() {
            var Chapter_id;
            var ChapterTotal;

            //  实现和阅读器相关的数据交互的方法
            /*先获取章节列表信息*/
            var init = function (UIcallback) {
                getFictionInfo(function () {
                    getCurChapterContent(Chapter_id, function (data) {
                        UIcallback && UIcallback(data)
                    })
                })
            }
            var getFictionInfo = function (callback) {
                $.ajax({
                    type: 'GET',
                    url: 'data/chapter.json',
                    dataType: 'json',
                    success: function (data1) {
                        /*拿到章节信息之后的回调*/
                        Chapter_id = Util.StorageGetter('chapter')
                        /*获取保存的章节id 假如获取到的id是null我们就使用默认的*/
                        if (Chapter_id == null) {
                            Chapter_id = data1.chapters[1].chapter_id;

                        }
                        ChapterTotal = data1.chapters.length;
                        Chapters = data1.chapters;
                        callback && callback();

                    }
                })
            }
            /*根据章节ID获取章节*/
            var getCurChapterContent = function (chapter_id, callback) {
                $.ajax({
                    type: 'GET',
                    url: 'data/data' + chapter_id + '.json',
                    dataType: 'json',
                    success: function (data1) {
                        if (data1.result == 0) {
                            var url = data1.jsonp;
                            Util.getBSONP(url, function (data2) {
                                callback && callback(data2);
                            })

                        }

                    }
                })

            }
            /*翻上一页需要的数据*/
            var prevChapter = function (UIcallback) {
                Chapter_id = parseInt(Chapter_id, 10);
                if (Chapter_id == 0) {
                    return;
                }
                Chapter_id -= 1;
                getCurChapterContent(Chapter_id, UIcallback);
                Util.StorageSetter('chapter', Chapter_id)//保存浏览页面
            }
            /*翻下一页需要的数据*/
            var nextChpater = function (UIcallback) {
                Chapter_id = parseInt(Chapter_id, 10)
                if (Chapter_id == ChapterTotal) {
                    return;
                }
                Chapter_id += 1;
                getCurChapterContent(Chapter_id, UIcallback);
                Util.StorageSetter('chapter', Chapter_id)//保存浏览页面
            }
            return {
                init: init,
                prevChapter: prevChapter,
                nextChpater: nextChpater,
            }
        }

        function ReaderBaseFrame(container) {
            // 渲染基本的UI结构
            function parseChapterData(jsonData) {
                var jsonObj = JSON.parse(jsonData);
                var html = '<h4>' + jsonObj.t + '</h4>'
                for (var i = 0; i < jsonObj.p.length; i++) {
                    html += '<p>' + jsonObj.p[i] + '</p>';

                }
                return html;
            }

            return function (data) {
                container.html(parseChapterData(data))

            }
        }

        function EventHanlder() {
            // 交互的事件绑定
            /*响应层*/
            Dom.action_md.click(function () {

                Dom.top_nav.toggle()
                Dom.bottom_nav.toggle()
                Dom.font_container.hide()
                Dom.ziti.removeClass('cur1');
                $('#catalogue').hide();


            });

            /*滚动的时候隐藏顶部和底部导航*/
            Win.scroll(function () {
                Dom.top_nav.hide()
                Dom.bottom_nav.hide();
                Dom.font_container.hide()
                Dom.ziti.removeClass('cur1');
                $('#catalogue').hide();


            })
            /*点击字体的时候面板出现*/
            Dom.ziti.click(function () {
                Dom.font_container.toggle()
                Dom.ziti.toggleClass('cur1');


            })
            /*增大字体*/
            $('#large_font').click(function () {
                initFontSize++;
                if (initFontSize > 20) {
                    initFontSize = 20;
                    return;
                }
                FitionContainer.css({fontSize: initFontSize})
                Util.StorageSetter('font_size', initFontSize)
            })
            /*减小字体*/
            $('#small_font').click(function () {
                initFontSize--;
                if (initFontSize <= 12) {
                    initFontSize = 12;
                    return;
                }
                FitionContainer.css({fontSize: initFontSize})
                Util.StorageSetter('font_size', initFontSize)

            })
            /*夜间模式*/
            Dom.ye.click(function () {

                if (yey) {
                    Dom.ye.addClass('cur2')
                    var cur2 = 'cur2';

                    bodyBackground = '#0f1410';
                    $('body').css({background: bodyBackground})
                    Util.StorageSetter('bodyColor', bodyBackground)
                    yey = false;
                    var pText = '夜间'
                    $(this).find('p').text(pText)
                    Util.StorageSetter('pText', pText)
                    Util.StorageSetter('pTubiao', cur2)
                    libg($('#ulbg>li').eq(5))
                } else {
                    Dom.ye.removeClass('cur2')
                    bodyBackground = '#fff';
                    var cur2 = '';
                    yey = true;
                    $('body').css({background: bodyBackground})
                    Util.StorageSetter('bodyColor', bodyBackground)
                    var pText = '白天'
                    $(this).find('p').text(pText)
                    Util.StorageSetter('pText', pText)
                    Util.StorageSetter('pTubiao', cur2)
                    libg($('#ulbg>li').eq(1))
                }
            })
            /*背景颜色设置*/
            $('#ulbg>li').each(function (index, item) {
                $(item).click(function () {
                    libg(item)
                })

            })
            /*背景颜色封装*/
            function libg(item) {
                var bg = $(item).find('span').css('background-color')
                $('body').css({background: bg})
                $(item).find('i').css({display: 'block'})
                $(item).siblings().find('i').css({display: 'none'})
                Util.StorageSetter('bodyColor', bg)

            }

            /*上一章*/
            $('#prev_button').click(function () {
                /*获得章节的翻页数据*/
                readerModel.prevChapter(function (data) {
                    readerUI(data)

                });
            })
            /*下一章*/
            $('#next-button').click(function () {
                readerModel.nextChpater(function (data) {
                    readerUI(data)
                });

            })
            /*点击目录的时候*/
            $('#mulu').click(function () {
                $('#catalogue').css({
                    display: 'block',
                })
                var li = '';
                $.each(Chapters, function (index, item) {
                    var title = item.title;
                    li += '<li>' + title + '</li>'
                    $('#catalogue_ul').html(li);
                })
                Dom.top_nav.hide()
                Dom.bottom_nav.hide();
            })
            /*目录滑动相关*/
            var index = 0;
            var width = $(window).width();

            $('#catalogue_ul').swipeUp(function () {
                index -= width
                $('#catalogue_ul').animate({
                    transform: 'translateY(' + index + 'px)'
                }, 10)

            })
            $('#catalogue_ul').swipeDown(function () {
                index += width
                if (index > 0) {
                    index = 0;
                }
                $('#catalogue_ul').animate({
                    transform: 'translateY(' + index + 'px)'
                }, 1)

            })

        }


        main();


    })()
</script>
</body>
</html>